<template>
  <div class="Regis">
    <div class="box">
      <div class="zhuce">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item prop="user">
            <el-input
              type="text"
              placeholder="请输入手机号或者邮箱号"
              required="required"
              v-model="ruleForm.user"
              prefix-icon="el-icon-user-solid"
            ></el-input>
          </el-form-item>
          <el-form-item prop="pass">
            <el-input
              type="password"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              v-model="ruleForm.pass"
              @keyup.enter.native="toSubmitForm('ruleForm')"
            ></el-input>
          </el-form-item>

          <el-form-item prop="checkPass">
            <el-input
              type="password"
              placeholder="请确认密码"
              prefix-icon="el-icon-lock"
              v-model="ruleForm.checkPass"
              @keyup.enter.native="toSubmitForm('ruleForm')"
            ></el-input>
          </el-form-item>

          <el-form-item prop="yzPass">
            <el-input
              class="yz"
              type="password"
              placeholder="请输入验证码"
              prefix-icon="el-icon-postcard"
              v-model="ruleForm.yzPass"
              @keyup.enter.native="toSubmitForm('ruleForm')"
            >
            </el-input>
          </el-form-item>

          <el-row class="hqyzm">
            <el-button class="aaa" @click="fn">获取验证码</el-button>
          </el-row>
          <el-form-item>
            <el-button type="danger" @click="submitForm('ruleForm')" class="zc"
              >立即注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    var tePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        // if (this.ruleForm.yzPass !== '') {
        //   this.$refs.ruleForm.validateField('yzPass');
        // }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validateUser = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("手机号或者邮箱不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        const reg2 = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (reg.test(value) || reg2.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的手机号或者邮箱"));
        }
      }
    };
    return {
      urlQuery: "",
      activeIndex: "1",
      ruleForm: {
        pass: "",
        checkPass: "",
        yzPass: "",
        user: "",
      },
      rules: {
        yzPass: [{ validator: tePass, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        user: [{ required: true, validator: validateUser, trigger: "blur" }],
      },
    };
  },
  methods: {
    fn: function () {
      var shijian = 60;
      var hq = document.getElementsByClassName("aaa")[0];

      var shi = setInterval(function () {
        shijian--;
        hq.innerHTML = shijian + "s";
        if (shijian == 52) {
          alert("验证码为：" + Math.floor(Math.random() * 9000 + 1000));
        }
        if (shijian == 0) {
          alert("验证码已过期，请重新发送");
          clearInterval(shi);
          hq.innerHTML = "获取验证码";
          console.log("1");
        }
      }, 500);
      // alert(shijian+'秒后重新获取验证码');
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.ge
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>


<style scoped>
.Regis {
  width: 100%;
  height: 600px;
  background: #f3f3f3;
  /* border: red solid; */
}
.box {
  background-color: white;
  width: 600px;
  height: 350px;
  position: relative;
  top: 80px;
  margin: 0 auto;
}
.zhuce {
  position: relative;
  top: 30px;
  right: 40px;
}
.yz {
  width: 200px;
  position: relative;
  right: 150px;
}
.hqyzm {
  position: relative;
  left: 150px;
  top: -60px;
}
.zc {
  position: relative;
  top: -30px;
  width: 500px;
}
</style>
